<template>
  <div class="header">
    <div class="navbar">
      <NuxtLink to="/">首页</NuxtLink>

      <el-button v-if="SearchTF" :icon="Search" round @click="SearchState = !SearchState">搜索</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";

const navItems = ref<any>([
  { title: "测试测试", link: "/", children: null },
  {
    title: "1",
    children: [
      {
        title: "测试测试",
        link: "/",
      },
      {
        title: "测试测试",
        link: "/",
      },
      {
        title: "测试测试",
        link: "/",
      },
    ],
  },
  {
    title: "测试测试",
    children: [
      {
        title: "测试测试",
        link: "/",
      },
      {
        title: "测试测试",
        link: "/",
      },
      {
        title: "测试测试",
        link: "/",
      },
    ],
  },
  {
    title: "测试测试",
    children: [
      {
        title: "测试测试",
        link: "/",
      },
      {
        title: "测试测试",
        link: "/",
      },
      {
        title: "测试测试",
        link: "/",
      },
    ],
  },
  {
    title: "测试测试",
    children: [
      {
        title: "测试测试",
        link: "/",
      },
      {
        title: "测试测试",
        link: "/",
      },
      {
        title: "测试测试",
        link: "/",
      },
    ],
  },
  {
    title: "测试测试",
    children: [
      {
        title: "测试测试",
        link: "/",
      },
      {
        title: "测试测试",
        link: "/",
      },
      {
        title: "测试测试",
        link: "/",
      },
    ],
  },
  { title: "测试测试", link: "/", children: null },
  { title: "测试测试", link: "/", children: null },
  {
    title: "测试测试",
    children: [
      {
        title: "测试测试",
        link: "/",
      },
      {
        title: "测试测试",
        link: "/",
      },
      {
        title: "测试测试",
        link: "/",
      },
    ],
  },
  {
    title: "测试测试",
    children: [
      {
        title: "测试测试",
        link: "/",
      },
      {
        title: "测试测试",
        link: "/",
      },
      {
        title: "测试测试",
        link: "/",
      },
    ],
  },
  {
    title: "测试测试",
    children: [
      {
        title: "测试测试",
        link: "/",
      },
      {
        title: "测试测试",
        link: "/",
      },
      {
        title: "测试测试",
        link: "/",
      },
    ],
  },
]);

const SearchTF = useSearchTF();

const showIndex = ref(null);

const SearchState = useSearch();

const dropdownIndex = ref(null); // 追踪当前展开的下拉菜单索引

// const showDropdown = (index: null) => {
//   showIndex.value = index;
// };

// const hideDropdown = (index: null) => {
//   if (showIndex.value == index) {
//     showIndex.value = null;
//   }
// };

const showDropdown = (index: any) => {
  console.log("show");
  dropdownIndex.value = index;
};

const hideDropdown = () => {
  console.log("hide");
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: center; /* 水平居中 */
  width: 100%;
  background-color: #333; /* 可选：设置背景颜色 */
}

.navbar {
  width: 1600px;
  height: 60px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 20px 16px;
  text-decoration: none;
}

a:hover {
  background-color: #111;
  color: #007bff;
}

/* .navbar {
  width: 100%;
  background-color: #333;
  overflow: hidden;
}

.navbar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.navbar li {
  float: left;
  padding: 12px 16px;
  position: relative;
}

.dropdown {
  display: block;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown li {
  padding: 8px 16px;
  white-space: nowrap;
}

.dropdown li:hover {
  background-color: #f1f1f1;
}

.navbar li:hover > .dropdown {
  display: block;
} */

/* .dropdown-menu {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  display: flex;
  flex-direction: column;
  top: 60px;
}

.show {
  display: block;
} */
</style>
